<template>
  <div class="gl_contentBox gl_heightFull">
    <photo-cropper
      ref="photoCropper"
      :action="action"
      :option="option"
      :link-address="linkAddress"
      height="500px"
      @photoCropperSave="photoCropperSave(arguments)"
      @goBack="goBack"
    />
  </div>
</template>
<script>
import {
  api_POST_EventsManagementBanner,
  api_PUT_EventsManagementBannerId
} from '@/extend/api/gameswaggerApi/app';
import photoCropper from './cropper';
export default {
  name: 'PhotoCropperDialog',
  components: {
    photoCropper
  },
  data() {
    return {
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`,
      dialogVisible: false,
      option: {
        img: '',
        autoCropWidth: '700px',
        autoCropHeight: '300px',
        fixedNumber: [7, 3]
      },
      bannerId: '', // 编辑的id
      imageUrl: '', // 编辑的url
      linkAddress: '', // 编辑的链接
      updateForm: {} // 提交的表单
    };
  },
  created() {
    this.bannerId = this.$route.query.bannerId || '';
    this.linkAddress = this.$route.query.linkAddress || '';
    this.imageUrl = this.$route.query.imageUrl || '';
    this.init(this.imageUrl);
  },
  methods: {
    init(imgUrl) {
      if (imgUrl) {
        this.$set(this.option, 'img', this.getStaticPhotoUrl(imgUrl));
      } else {
        this.$set(this.option, 'img', '');
      }
      // this.$set(this.option, 'autoCropWidth', this.autoCropWidth);
      // this.$set(this.option, 'autoCropHeight', this.autoCropHeight);
      // this.$set(this.option, 'fixedNumber', this.fixedNumber);
      this.dialogVisible = true;
    },
    // 点击保存
    photoCropperSave(data) {
      this.$refs.photoCropper.upload().then(res => {
        // this.$emit('photoCropperSave', res, data[1]);
        console.log('reeres', res, data);
        this.$set(this.updateForm, 'imageUrl', res.tempUrl);
        this.$set(this.updateForm, 'linkAddress', data[1]);
        if (this.bannerId) {
          this.updateBanner();
        } else {
          this.addBanner();
        }
        this.dialogVisible = false;
      });
    },
    // 添加banner
    addBanner() {
      const that = this;
      api_POST_EventsManagementBanner(that.updateForm).then(res => {
        if (res) {
          that.$message({ type: 'success', message: '添加成功' });
          that.goBack();
        }
      }, (error) => {
        that.$message({ type: 'error', message: error.error.message || '添加失败' });
      });
    },
    // 更新banner
    updateBanner() {
      const that = this;
      api_PUT_EventsManagementBannerId(that.bannerId, that.updateForm).then(res => {
        if (res) {
          that.$message({ type: 'success', message: '编辑成功' });
          that.goBack();
        }
      }, (error) => {
        that.$message({ type: 'error', message: error.error.message || '编辑失败' });
      });
    },
    // 返回上一层
    goBack() {
      this.$router.push({
        path: `banner`
      });
    },
    // 获取静态文件
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

